// 搜索框的border颜色
$("#search").on("click",function(e){
    $(this).css("borderColor","#8C5D3D");
    // e.stopPropogation();
    return false;

})

$(document).on("click",function(){
    $("#search").css("borderColor","");
})
// 轮播图
$("#slide").banner({
    img:$("#slide").children("#imgbox").children("a"),
    left:$("#slide").find("#left_btn"),
    right:$("#slide").find("#right_btn"),
    list:true,
    autoPlay:true,
    delayTime:3000,//图片停留时间
    moveTime:300//图片运动时间
})

function list(){
    for(let i=0;i<$(".lb").length;i++){
        $(".lb").eq(i).hover(function(){
            $(".biglist").css("display","block").hover(function(){
                $(this).css("display","block");
            },function(){
                $(this).css("display","none");
            }).children(".list_con"+i).css("display","block").siblings().css("display","none");
    
        },function(){
            $(".biglist").css("display","none");
        })
    }
}
list();
 


//  ajax
$.ajax({
    url:"http://localhost:1000/data/index.json",
    success:function(res){
        //  console.log(res);
        var str="";
        for(var i=0;i<res.length;i++){
            str+=`<div class="box">
                <img src="${res[i].img}" alt="">
                <p>视${res[i].alt}</p>
                <div class="xq">
                    <div class="flag">
                        <span>${res[i].flag}</span>
                    </div>
                    <p class="tit">${res[i].title}</p>
                    <div class="price">
                        <span class="one">￥</span>
                        <span class="two" >${res[i].price}</span>
                        <span class="one">${res[i].qi}</span>
                    </div>

                </div>
            </div> `
        }
        $(".imgbox").html(str);
    }
})

// 吸顶操作

document.onscroll=function(){
    if(document.documentElement.scrollTop>=470){
        $(".xd").css({
            display:"block",
            position:"fixed",
            top:"0"
        });
    }else{
        $(".xd").css({
            display:"none"
        });
    }
}

//  吸顶菜单的分类下拉菜单
function classify(){
    var banner=$(".bigbanner").clone(true).appendTo($(".bigclass")).find("#title").css("display","none").siblings("#cont").children("#slide").css("display","none").parent().parent().parent().css({
        position:"fixed",
        top:60,
        left:0,
        zIndex:4
    }).children("#banner").css({
        marginTop:0,
        display:"none"
    });

    $(".bigclass").hover(function(){
        banner.css("display","block");
    },function(){
        banner.css("display","none");
    })

    banner.hover(function(){
        $(this).css("display","block");

    },function(){
        $(this).css("display","none");
    })

    

   
}
classify();

// 回到顶部
function back(){
    $(".back").on("click",function(){
        console.log(1);
        var top=document.documentElement.scrollTop;
        $("html").animate({
            scrollTop:0
        })
    })
}
back();

 
// 点击滚动
class clickScroll{
    constructor(parent){
        this.parent=parent;
        this.length=this.parent.find(".rm_box").length;
        this.width=this.parent.find(".rm_box").eq(0).width()+5;
        this.init();
        this.left=this.parent.find(".left");
        this.right=this.parent.find(".right");
        this.index=0;
        this.addEvent();
    }
    init(){
        this.parent.find(".rm").width(this.length*this.width);
    }
    addEvent(){
        var that=this;
        this.left.on("click",function(){
            if(that.index==0){
                that.index=0
            }else{
                that.index--;
            }
            that.move(-1);
        })
        this.right.on("click",function(){
            if(that.index==that.length-4){
                that.index=that.length-4;
            }else{
                that.index++;
            }
            that.move(1);
        })
    }
    move(i){
        this.parent.find(".rm").animate({
            left:-this.index*this.width
        })
    

    }
}
 
var xsg=new clickScroll( $("#xsg"));
var day=new clickScroll( $("#day"));

class clickToList{
    constructor(){
        this.aLi=$(".lb");
        this.a=this.aLi.children("a");
        this.aList=$(".biglist_con").children("ul");
        this.init();
        this.addEvent();
    }
    init(){
        // 给每个li加一个标志
        for(var i=0;i<this.aLi.length;i++){
            this.aLi.eq(i).attr("index",i);
        }
    }
    addEvent(){
        var that=this;
        for(var i=0;i<this.a.length;i++){
            this.a.eq(i).on("click",function(){
                that.index=$(this).parent().attr("index");
                that.aContent=$(this).html();
                that.storage={
                    "index":that.index,
                    "content":that.aContent
                }
                localStorage.setItem("listContent",JSON.stringify(that.storage));
                location.href="pages/list.html";
            })
        }
         
    }

}
var c=new clickToList();


class User{
    constructor(){
        this.session=sessionStorage.getItem("user")?JSON.parse(sessionStorage.getItem("user")):{};
        this.li=$("#list").children("li").eq(0);
        this.login=$("#login");
        this.register=$("#register");
        this.welcome=$("#welcome");
        this.init();
        this.addEvent();
    }
    init(){
        if(this.session.user){
            this.welcome.html( `${this.session.user} <span class="iconfont icon-xjt"></span>`).css({
                display:"inline",
                borderRight:"1px solid #666"
            }).siblings("a").css("display","none");
            
            this.li.hover(()=>{
                $(".second_list").css("display","flex");
            },()=>{
                $(".second_list").css("display","none");
            });
            $("#exit").on("click",()=>{
               sessionStorage.removeItem("user");
               this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");
            })
             
        }else{
            this.welcome.html("").css({
                display:"none",
                borderRight:"0"
            }).siblings("a").css("display","inline");


        }
    }
    addEvent(){
       this.login.on("click",function(){
            $(this).attr("href","pages/login.html");
        })
        this.register.on("click",function(){
            $(this).attr("href","pages/register.html");
        
        })
        
    }
}
new User();

$(".icon-gwc").on("click",function(){
    location.href="../pages/cart.html";
})